<template>
  <div class="recommend_foryou">
    <div class="part1">
      <span class="recommend_foryou_span">为你推荐</span>
      <!-- <router-link> -->
      <div class="day_recommend">
        <button class="recommend_all" @click="to_day_recommend">
          查看全部
        </button>
      </div>
      <!-- </router-link> -->
    </div>
    <div class="part2">
      <div class="day_case_left">
        <div class="day_case_left_body">
          <div class="myimg"></div>
        </div>
        <div class="day_case_left_btn">
          <span class="day_case_provenance1">加载中……</span>
          <p></p>
          <span class="day_case_author">加载中……</span>
        </div>
      </div>
      <div class="day_case_right">
        <div class="day_case_right_body">
          <div class="myimg"></div>
        </div>
        <div class="day_case_right_btn">
          <span class="day_case_provenance2">加载中……</span>
          <p></p>
          <span class="day_case_author">加载中……</span>
        </div>
      </div>
    </div>

  </div>
</template>
<style lang="less" scoped>
.part1 {
  text-align: left;

  .recommend_all {
    border-radius: 40px;
    display: inline-block;
    position: relative;
    border: 0.5px solid gray;
    background-color: rgba(255, 255, 255, 0.3);
    color: #000;
    width: 30vw;
    height: 30px;
    font-size: 16px;
    line-height: 16px;
    padding: 4px;
  }

  .day_recommend {
    position: relative;
    display: inline-block;
    width: 14vw;
    height: auto;
    background-color: transparent;
  }

  .recommend_foryou_span {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    left: 0;
    width: 80px;
    height: 20px;
    margin-left: 10vw;
    margin-right: 34vw;
  }
}

.part2 {
  .day_case_left,
  .day_case_right {
    display: inline-block;
  }

  .day_case_left_body,
  .day_case_right_body {
    width: 150px;
    height: 100px;
    position: relative;
    display: inline-flex;
    background-color: #fce2b8;
    margin: 10px;
    margin-top: 80px;
    border-radius: 5px;
  }

  .day_case_right_body {
    background-color: #d2c2ff;
  }

  .day_case_left_body .myimg,
  .day_case_right_body .myimg {
    margin: 0 auto;
    width: 90px;
    height: 135px;
    margin-top: -55px;
    position: relative;
    border-radius: 5px;
    background-image: url(../img/小于一粒尘埃.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .day_case_left_body .myimg {
    background-image: url(../img/心之力.png);
  }

  .day_case_provenance1,
  .day_case_provenance2 {
    font-weight: bold;

  }

  .day_case_author {
    color: #8a8a89;
  }

  .day_recommend {
    height: 60px;
    text-decoration: none;
  }
}
</style>
<!-- Ajax 请求数据 -->
<!-- <script>
// function getData() {
//   let getData =new Date();
//   const year = new Date().getFullYear();
//   const month = String(getData.getMonth() + 1).padStart(2, '0');
//   const day1 = String(getData.getDate()-1).padStart(2, '0');
//   const day2 = String(getData.getDate()).padStart(2, '0');
//     // 创建 XMLHttpRequest 对象
//     var xhr = new XMLHttpRequest();
//     // 设置请求类型和URL地址
//     xhr.open('GET', 'https://apis.netstart.cn/daodu/lessons?form='+year+month+day1+'&to='+year+month+day2, true);
//     // 设置响应类型
//     xhr.responseType = 'json';
//     // 设置状态变化时的回调函数
//     xhr.onreadystatechange = function() {
//         if (xhr.readyState === 4 && xhr.status === 200) {
//             // 请求成功完成并收到响应
//             var data = xhr.response;
//             console.log(data);
//             updateDOM(data);
//         }

//     };
//     // 发送请求
//     xhr.send();
// }

// function updateDOM(data) {
//     // 更新 DOM 元素
//     var contentElement = document.querySelector('.day_recommend');
//     // contentElement.textContent = JSON.stringify(data, null, 2); 
//     // 这里简单地将数据字符串化后显示
//     console.log(contentElement);
//     console.log(data[0]);
// }

// // 调用函数获取数据
// getData();
</script> -->


<script>
import axios from 'axios';
// 使用事件总线
// 时间
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}${month}${day}`;
}

const today = new Date();
const formattedToday = formatDate(today);
export default {
  name: "RecommendForYou",
  data() {
    return {
      msg: 'Hello Vue!',
    }
  },
  mounted() {
    this.fetchData();
  },
  computed: {
    isShow() {
      return this.$route.query.isShow === 'true';
    }
  },

  methods: {
    fetchData() {
      // 设置加载状态
      this.loading = true;
      axios.get('https://apis.netstart.cn/daodu/lessons', {
        params: {
          form: 20230901,
          to: formattedToday,
        }
      })
        // 成功
        .then(require => {
          // 渲染数据
          document.querySelector(".day_case_provenance1").innerText = require.data[0].provenance;
          document.querySelector(".day_case_left_btn .day_case_author").innerText = require.data[0].author.name;
          document.querySelector(".day_case_provenance2").innerText = require.data[1].provenance;
          document.querySelector(".day_case_right_btn .day_case_author").innerText = require.data[1].author.name;
          this.loading = false;
        })
        // 失败
        .catch(error => {
          console.log(error);
          this.loading = false;
        })
    },
    to_day_recommend() {
      this.$router.push({ path: '/day_recommend'});
    },
    

}
}
</script>